<template>
  <div>
    <el-dialog
        :title="`${showTitle}用户`"
        :visible.sync="showDialog"
        @close= 'closeDialog'
        >
       <el-form
       :model="formData"
        ref="formRef"
        :rules="rules">

        <el-form-item label="用户名" prop="username">
            <el-input v-model="formData.username"></el-input>
        </el-form-item>

         <el-form-item label="邮箱" prop="email">
            <el-input v-model="formData.email" ></el-input>
        </el-form-item>

         <el-form-item v-if="isShow" label="密码" prop="password">
            <el-input v-model="formData.password" ></el-input>
        </el-form-item>

         <el-form-item label="角色" prop="role">
            <el-input v-model="formData.role" ></el-input>
        </el-form-item>

         <el-form-item label="权限组名称" prop="permission_group_id">
            <el-select placeholder="请选择" v-model="formData.permission_group_id">
                <el-option v-for="item in pNameList" :key="item.id" :value="item.id" :label="item.permission_group_id"></el-option>
            </el-select>
        </el-form-item>

         <el-form-item label="联系电话" prop="phone">
            <el-input v-model="formData.phone"></el-input>
        </el-form-item>

         <el-form-item label="介绍" prop="introduction">
            <el-input type="textarea" v-model="formData.introduction" placeholder="请填写"></el-input>
        </el-form-item>

       </el-form>

       <!-- footer插槽 -->
    <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="closeDialog">取消</el-button>
          <el-button type="primary" size="small" @click="btnOk">确定</el-button>
        </el-col>
      </el-row>
    </template>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, detail, update } from '@/api/base/users.js'
// console.log(add(data))
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      pNameList: [],
      formData: {
        username: '', // 用户名
        email: '', // 邮箱
        password: '', // 密码
        role: '', // 角色
        permission_group_id: '', // 权限组名称
        phone: '', // 联系电话
        introduction: '' // 介绍
      },
      rules: {
        username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
        email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.login()
  },
  methods: {
    closeDialog () {
      this.formData = {
        username: '', // 用户名
        email: '', // 邮箱
        password: '', // 密码
        role: '', // 角色
        permission_group_id: '', // 权限组名称
        phone: '', // 联系电话
        introduction: '' // 介绍
      }
      this.$refs.formRef.resetFields()
      this.$emit('update:showDialog', false)
    },
    async btnOk () {
      try {
        await this.$refs.formRef.validate()
        if (this.formData.id) {
          console.log(this.formData)
          await update({
            avatar: this.formData.avatar,
            email: this.formData.email,
            id: this.formData.id,
            introduction: this.formData.introduction,
            permission_group_id: this.formData.permission_group_id,
            phone: this.formData.phone,
            role: this.formData.role,
            username: this.formData.username
          })
        } else {
          // ewr
          await add(this.formData)
          // this.$message.success('新增员工成功')
        }
        this.$parent.getUserPage()
        this.$message.success('操作成功')
        this.showDialog = false
      } catch (e) {
        console.log(e)
      }
    },
    async editUserInfo (data) {
      const res = await detail(data)
      this.formData = res.data
      this.showDialog = true
    },
    async login () {
      const { data } = await list()
      console.log(data)
      this.pNameList = data.list
    }
  },
  computed: {
    showTitle () {
      return this.formData.id ? '编辑' : '新增'
    },
    isShow () {
      return !this.formData.id
    }
  }
}
</script>

<style>
.el-form{
text-align: center;
}
    .el-form-item{
width: 50%;
margin-left: 130px;
    }

</style>
